<template>
  <div id="video">
    <div class="Top">
      <a-input-search placeholder="搜索" style="width: 200px" @search="onSearch" />
      <a-button @click="visible = true"> <a-icon type="edit" /> 添加视频 </a-button>
    </div>
    <video-source @closeVideo="showVideo = false" :videoSrc="videoSrc" v-if="showVideo"></video-source>
    <div class="content">
      <div v-for="item in videoList" :key="item.id">
        <video-item :video="item" @sendSrc="sendSrc"></video-item>
      </div>
    </div>
    <a-modal
      title="视频上传"
      :visible="visible"
      @ok="handleSubmit"
      @cancel="visible = false"
    >
      <template slot="footer">
        <a-button key="back" @click="visible = false"> 取消 </a-button>
        <a-button key="submit" type="primary" @click="handleSubmit"> 上传 </a-button>
      </template>
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        @submit="handleSubmit"
      >
        <a-form-item label="标题">
          <a-input
            v-decorator="[
              'title',
              { rules: [{ required: true, message: '请输入标题' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="上传">
          <a-upload
            :file-list="fileList"
            :remove="handleRemove"
            :before-upload="beforeUpload"
          >
            <a-button> <a-icon type="upload" /> 选择视频 </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import videoItem from "./videoItem.vue";
import videoSource from "./videojs.vue"
export default {
  components: {
    videoItem,
    videoSource
  },
  data(){
    return {
      videoList:[],
      AllVideoList:[],
      showVideo:false,
      videoSrc:"",
      visible:false,
      form: this.$form.createForm(this, { name: "coordinated" }),
      fileList:[]
    }
  },
  created() {
    this.getAllVideoList()
  },
  methods: {
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      if(file.type.split("/")[0]!=="video"){
        this.$message.error("请上传视频");
        return ;
      }
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        console.log(values);

        if (!err) {
          console.log("Received values of form: ", values);
          this.upload(values);
          this.visible = false;
        }
      });
    },
    upload(values) {
      let formData = new FormData();
      for (const key in this.fileList) {
        formData.append("mp4file", this.fileList[key]);
      }
      formData.append("username", this.$store.state.user.userInfo.username);
      formData.append("title", values.title);
      formData.append("origin", "add");
      formData.append("way","video");
      formData.append("format","mp4");
      formData.append("status", this.$store.getters.user.status);
      this.$axios
        .post("/upload/upMp4", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.dialogVisible = false;
            this.$message.success("上传成功");
            this.getAllVideoList();
          } else {
            this.$message.warning("上传失败");
          }
        });
      this.dialogVisible = true;
    },
    onSearch(values){
      var reg = new RegExp(values); 
      this.videoList = this.AllVideoList.filter(item=>reg.test(item.title))
    },
    sendSrc(values){
      this.showVideo = true
      this.videoSrc = values
    },
    getAllVideoList() {
      this.$axios
        .get("/prod/search")
        .then((res) => {
          if (res.data.error == -1) {
            console.log(res);
            this.videoList = res.data.data;
            this.AllVideoList = res.data.data;
          } else if (res.data.error == 0) {
            this.videoList = [];
            this.AllVideoList = [];
          }
        })
        .catch((err) => {
          alert("服务器错误");
        });
    },
  },
};
</script>

<style scoped lang="less">
#video {
  width: 100%;
  height: 100%;
  background: #ececec;
  box-sizing: border-box;
  padding: 70px;
  position: relative;
  .Top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0 70px;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .content{
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
